<template>
	<div class="modal-mask" :style="{ opacity }" v-if="show" :animation="animationData" @click="close()">

		<div class="modal-box">
			<span :class="'iconfont ' + _icon" v-if="showIcon"></span>
			<span class="pet-font16-black modal-title" v-html="_title"></span>
			<span class="pet-font14-black" style="white-space: pre-wrap;">{{ _content }}</span>
			<div class="confirm" :style="{background: _confirmColor}" @tap.stop="confirm">{{ _confirmText }}</div>
			<div class="cancel" :style="{background: _cancelColor}" @tap.stop="close" v-if="showCancel">{{ _cancelText }}
			</div>
			<span class="bottom-text" v-html="_buttomText"></span>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			//确定按钮的背景颜色
			confirmColor: {
				type: String,
				default: '#EA5454'
			},
			//是否显示取消按钮
			showCancel: {
				type: Boolean,
				default: true
			},
			//取消按钮的背景色
			cancelColor: {
				type: String,
				default: '#F8F8F8'
			},
			//确定按钮的文本
			confirmText: {
				type: String,
				default: '确认中止'
			},
			//取消按钮的文本
			cancelText: {
				type: String,
				default: '返回'
			},
			//模态框标题
			title: {
				type: String,
				default: '注意'
			},
			//图标
			icon: {
				type: String,
				default: 'icon-zhuyi1'
			},
			//是否显示icon
			showIcon: {
				type: Boolean,
				default: true
			},
			//描述内容
			content: {
				type: String,
				default: '中止采购计划后，采购清单和参与组织的选择记录将被删除，将会通知他们'
			},
			//模态框的类型
			type: {
				type: Number,
				default: 0
			},

			//底部居中小文字
			buttomText: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				show: false,
				_title: '注意',
				_content: '中止采购计划后，采购清单和参与组织的选择记录将被删除，将会通知他们',
				_icon: 'icon-zhuyi1',
				_confirmText: '确认中止',
				_cancelText: '返回',
				_confirmColor: '#EA5454',
				_cancelColor: '#F8F8F8',
				animationData: {},
				_buttomText: '',
				_type: null,
				opacity: 0
			}
		},
		methods: {
			async confirm() {
				if (this.success) await this.success();
				this.close();
			},
			//打开模态框
			async open(obj) {
				if (this.show) return;
				if (obj) {
					this.init(obj);
				}
				this.show = true;
				
				this.$nextTick(() => {
					this.onAnimation(1)
				})
			},
			//关闭
			async close() {
				if (this.cancel) await this.cancel();
				let res = await this.onAnimation(0)
				this.show = false;
				uni.showTabBar({
					animation: true
				})
			},
			//过渡动画
			onAnimation(opacity, scale) {
				return new Promise((resolve, reject) => {
					/** 只有小程序才执行  */
					// #ifdef MP
					var animation = uni.createAnimation({
						duration: 300,
						timingFunction: "linear"
					})
					animation.opacity(opacity).step();
					this.animationData = animation.export();
					setTimeout(() => {
						resolve(true)
					}, 300)
					// #endif
					
					/** 除了小程序都执行 */
					// #ifndef MP
					this.opacity = opacity;
					resolve(true)
					// #endif
				})
			},
			//初始化
			init(that = this) {
				this._title = that.title;
				this._icon = that.icon;
				this._content = that.content;
				this._confirmText = that.confirmText;
				this._confirmColor = that.confirmColor;
				this._cancelColor = that.cancelColor;
				this._cancelText = that.cancelText;
				this.success = that.success;
				this.cancel = that.cancel;
				this._buttomText = that.buttomText;
				this._type = that.type;
			},
		},
		mounted() {
			this.init();
		}
	}
</script>

<style lang="scss">
	.modal-mask {
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		padding: 0 8vw;
		background-color: rgba(11, 11, 11, .7);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		opacity: 0;

		.modalTwo-box {
			padding: 6.4vw;
			background-color: #FFF;
			border-radius: 4.27vw;
			display: flex;
			// align-items: center;
			flex-direction: row;
			align-items: baseline;

			.icon {
				display: inline-block;
				width: 4.27vw;
				height: 4.27vw;
				font-size: 4.27vw;
				color: #D2AD87;
				margin-right: 2.13vw;
				margin-top: 0;
			}

			.modal-title{
				font-size: 3.73vw;
				font-weight: 500;
				color: #000000;
			}
		}

		.iconfont {
			// margin-top: 4.8vw;
			// font-size: 7.47vw;
			font-size: 12.8vw;
		}

		.modal-box {
			padding: 7vw 5.33vw;
			background-color: #FFF;
			border-radius: 4.27vw;
			display: flex;
			align-items: center;
			flex-direction: column;

			.modal-title {
				margin-top: 2.13vw;
				margin-bottom: 2.13vw;
				font-weight: bold;
			}

			.pet-font14-black {
				text-align: center;
				font-weight: 400;
			}

			.confirm,
			.cancel {
				width: 100%;
				height: 10.67vw;
				border-radius: 2.13vw;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 3.73vw;
				font-weight: 500;
			}

			.confirm {
				background-color: #EA5454;
				margin-top: 6.4vw;
				color: #FFF;
			}

			.cancel {
				background-color: #F8F8F8;
				margin-top: 2.13vw;
				color: #BBB;
			}
		}
	}

	.type1 {
		padding: 8.53vw 5.33vw !important;
		text-align: left;
	}

	.modal-close {
		height: 10.67vw;
		width: 10.67vw;
		background-color: transparent;
		display: block;
		margin-top: 6.4vw;
	}

	.text-box {
		margin-top: 2vw;
	}

	.font10 {
		font-size: 10.16vw;
	}

	.bottom-text {
		margin-top: 2.13vw;
		color: #BBBBBB;
		text-align: center;
		font-size: 3.2vw;
		font-weight: 400;
	}
	.icon-zhuyi1{
		// font-size: 10.67vw !important;
		// width: 10.67vw;
		// height: 10.67vw;
	}
	.icon-queren{
		width: none !important;
		height: none !important;
		margin: 0 !important;
		font-size: 10.67vw !important;
	}
	.receive-box{
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		
		.share-img{
			width: 84vw;
			height: 117.87vw;
			position: absolute;
			// bottom: -55vw;
			z-index: -1;
		}
		
		.text-box{
			height: 118vw;
			.head-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-top: 10.67vw;
				text-align: center;
				.lq{
					margin-top: 4.8vw;
					font-size: 4.27vw;
					font-weight: 500;
					color: #181818;
				}
				.text{
					margin-top: 1.07vw;
					font-size: 3.2vw;
					font-weight: 300;
					color: #000000;
				}
			}
			.line{
				border-bottom: 2px dashed #efefef;
				margin: 8.5vw;
			}
			.process-box{
				padding: 10.67vw;
				padding-top: 0;
				font-size: 3.73vw;
				font-weight: 300;
				color: #000000;
				.margin-T{
					margin-top: 2.67vw;
					display: flex;
					span:nth-child(2){
						margin-left: 1.87vw;
					}
				}
			}
			.time{
				text-align: center;
				font-size: 3.2vw;
				font-weight: 300;
				color: #BBBBBB;
			}
		}
	}
	.dayPoster{
		width: 100%;
		height: 130vw;
		border-radius: 2.13vw;
	}
	.icon-guanbi1{
		font-size: 8.33vw !important;
		margin-top: 5.33vw;
	}
</style>
